<template>
  <div>
    <div class="shop-cart">
      <div class="content">
        <div class="cart">
          <div class="cart-wrapper"
               @click="toggleList">
            <div v-if="totalCount > 0"
                 class="badge">{{totalCount}}</div>
            <img src="../../../static/imgs/cart.png" />
          </div>
          <div class="price">{{shopInfo.currencydefault}} {{totalPrice}}</div>
        </div>
        <div class="make-order"
             :class="{'no-food': totalCount === 0}"
             @click="goOrder">
          {{$t('message.MenuShopCart_order')}}
<!--          {{totalCount > 0 ? '选好了' : '点餐'}}-->
        </div>
      </div>
      <transition name="fold">
        <div v-show="listShow && totalCount > 0"
             class="shop-cart-list">
          <div class="title">
            <span>{{$t('message.MenuShopCart_einkaufswagen')}}</span>
            <span class="empty"
                  @click="$emit('empty')">{{$t('message.MenuShopCart_allesloschen')}}</span>
          </div>
          <ul>
            <li v-for="(food, index) in cartFoods"
                :key="index">
              <div class="name">{{food.name}}</div>
              <div class="option"
                   v-for="(option, optionIndex) in food.specials"
                   :key="optionIndex">{{option}}</div>
              <div class="price-wrapper">
                <div class="price">{{shopInfo.currencydefault}} {{food.cost}}</div>
                <div class="control-wrapper">
                  <list-control :food="food"
                                @add="addNum">
                  </list-control>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </transition>
      <transition name="fade">
        <div class="list-mask"
             @click="toggleList"
             v-show="listShow && totalCount > 0"></div>
      </transition>
      <div class="ball-container">
        <div v-for="(ball,index) in balls"
             :key="index">
          <transition @before-enter="beforeDrop"
                      @enter="dropping"
                      @after-enter="afterDrop">
            <div class="ball"
                 v-show="ball.show">
              <div class="inner inner-hook"></div>
            </div>
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ListControl from './ListControl'
import { mapState, mapMutations } from 'vuex'
const BALL_LEN = 10
const innerClsHook = 'inner-hook'
function createBalls () {
  let balls = []
  for (let i = 0; i < BALL_LEN; i++) {
    balls.push({ show: false })
  }
  return balls
}
export default {
  name: 'ShopCartList',

  data () {
    return {
      balls: createBalls(),
      remarkIndex: '',
      remark: ''
    }
  },

  props: {
    listShow: {
      type: Boolean
    },
    shopInfo: {
      type: Object
    },
    totalPrice: {
    },
    totalCount: {
      type: Number
    },
  },

  components: {
    ListControl
  },
  created () {
    this.dropBalls = []
  },

  watch: {},

  computed: {
    ...mapState([
      'cartFoods'
    ])
  },

  filters: {},

  methods: {
    goOrder () {
      if (!this.totalCount) {
        return
      }
      this.$router.push('/order')
    },
    ...mapMutations([
      'ADD_CART',
      'DEC_CART'
    ]),
    drop (el) {
      for (let i = 0; i < this.balls.length; i++) {
        const ball = this.balls[i]
        if (!ball.show) {
          ball.show = true
          ball.el = el
          this.dropBalls.push(ball)
          return
        }
      }
    },
    beforeDrop (el) {
      const ball = this.dropBalls[this.dropBalls.length - 1]
      const rect = ball.el.getBoundingClientRect()
      const x = rect.left - 32
      const y = -(window.innerHeight - rect.top - 22)
      el.style.display = ''
      el.style.transform = el.style.webkitTransform = `translate3d(0,${y}px,0)`
      const inner = el.getElementsByClassName(innerClsHook)[0]
      inner.style.transform = inner.style.webkitTransform = `translate3d(${x}px,0,0)`
    },
    dropping (el, done) {
      this._reflow = document.body.offsetHeight
      el.style.transform = el.style.webkitTransform = `translate3d(0,0,0)`
      const inner = el.getElementsByClassName(innerClsHook)[0]
      inner.style.transform = inner.style.webkitTransform = `translate3d(0,0,0)`
      el.addEventListener('transitionend', done)
    },
    afterDrop (el) {
      const ball = this.dropBalls.shift()
      if (ball) {
        ball.show = false
        el.style.display = 'none'
      }
    },
    //  显示购物车列表
    toggleList () {
      if (!this.totalCount) {
        return;
      }
      this.$emit('toggle')
    },
    //  执行小球动画
    addNum (target) {
      this.drop(target);
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../../static/css/mixin";
.shop-cart {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 150;
  width: 100%;
  .content {
    position: relative;
    z-index: 160;
    display: flex;
    height: 1rem;
    .cart {
      flex: 1;
      @include fa();
      background-color: #fff;
      .cart-wrapper {
        position: relative;
        top: -0.2rem;
        left: 0.24rem;
        width: 1.36rem;
        height: 1.32rem;
        img {
          width: 100%;
        }
        .badge {
          position: absolute;
          right: 0;
          top: 0;
          @include whl(0.48rem, 0.32rem);
          background: rgba(239, 20, 20, 1);
          box-shadow: 0 0.06rem 0.1rem 0 rgba(0, 0, 0, 0.3);
          border-radius: 0.24rem;
          text-align: center;
          @include fscfw(0.24rem, $fc);
        }
      }
      .price {
        padding-left: 0.4rem;
        @include fscfw(0.4rem, #e80d27);
      }
    }
    .make-order {
      line-height: 1rem;
      text-align: center;
      flex: 0 0 3rem;
      background-color: $tc;
      @include fscfw(0.32rem, $fc);
      &.no-food {
        background-color: #c8c8c8;
      }
    }
  }
  .shop-cart-list {
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 150;
    transform: translate3d(0, -100%, 0);
    &.fold-enter-active,
    &.fold-leave-active {
      transition: all 0.5s;
    }
    &.fold-enter,
    &.fold-leave-active {
      transform: translate3d(0, 0, 0);
    }
    .title {
      @include fja();
      margin: 0 0.48rem;
      height: 1.18rem;
      font-size: 0.32rem;
      border-bottom: 0.008rem solid #dcdfe5;
      .empty {
        color: $tc;
      }
    }
    ul {
      padding: 0 0.48rem 0.48rem;
      max-height: 5.64rem;
      overflow-y: scroll;
      li {
        border-bottom: 0.008rem solid #dcdfe5;
        padding-bottom: 0.38rem;
        .name {
          padding: 0.2rem 0;
          @include fscfw(0.36rem);
        }
        .option {
          color: #969696;
        }
        .price-wrapper {
          @include fja();
          .price {
            @include fscfw(0.36rem, #ef1414);
          }
          .control-wrapper {
          }
        }
      }
    }
  }
  .list-mask {
    position: fixed;
    top: 0;
    left: 0;
    @include wh(100%);
    z-index: 40;
    backdrop-filter: blur(10px);
    opacity: 1;
    background: rgba(7, 17, 27, 0.6);
    &.fade-enter-active,
    &.fade-leave-active {
      transition: all 0.5s;
    }
    &.fade-enter,
    &.fade-leave-active {
      opacity: 0;
      background: rgba(7, 17, 27, 0);
    }
  }
  .ball-container {
    .ball {
      position: fixed;
      left: 32px;
      bottom: 22px;
      z-index: 200;
      transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41);
    }
    .inner {
      @include wh(16px);
      border-radius: 50%;
      background: $tc;
      transition: all 0.4s linear;
    }
  }
}
</style>
